<!DOCTYPE html>
<html>

<head>
    <meta name="referrer" content="always">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>京豆统计</title>
    <script src="//cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
    <style>
        html,body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="summary" style="width: 100vw;height:30vh;margin-top:20px;"></div>
    <div id="main" style="width: 100vw;height:50vh;margin-top:20px;"></div>
    <div id="income" style="width: 100vw;height:90vh;margin-top:20px;"></div>
    <div id="expense" style="width: 100vw;height:60vh;margin-top:20px;"></div>
    <script type="text/javascript">
      var xAxis = <?php echo ($date);?>;
        var increases = <?php echo ($increases);?>;
        var decreases = <?php echo ($decreases);?>;
        var totals = <?php echo ($totals);?>;
        var title = "<?php echo ($user->mobile);?>";


        var summaryChart = echarts.init(document.getElementById('summary'));
        var summaryOption = {
            title: {
                text: '最近30天总收入支出',
                subtext: title,
                left: 'center',
                align: 'right'
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['收入', '支出']
            },
            series: [{
                data: [<?php echo ($incomeAll);?>, <?php echo (abs($expenseAll));?>],
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
            }]
        };
        summaryChart.setOption(summaryOption);

        // 最近30天收支详情
        var myChart = echarts.init(document.getElementById('main'));
      
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '京豆变化',
                subtext: title,
                left: 'center',
                align: 'right'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['增加', '减少'],
                left: 'center',
                align: 'right',
                top: 50
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '70',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '增加',
                    type: 'line',
                    data: increases
                },
                {
                    name: '减少',
                    type: 'line',
                    data: decreases
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 收入
        var incomeLegend = <?php echo ($incomeLegend);?>;
        var incomeData = <?php echo ($incomeData);?>;

        var incomeChart = echarts.init(document.getElementById('income'));
        var incomeOption = {
            title: {
                text: '30天内收入类型统计',
                subtext: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: '300',
                bottom: 20,
                data: incomeLegend
            },
            // 使用回调函数
            formatter: function(name) {
                    var data = incomeOption.series[0].data;//获取第一个数组
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += parseInt(data[i].value);

                        if (data[i].name == name) {
                            tarValue = parseInt(data[i].value);
                        }
                    }
                    console.log('abc', tarValue, total, name)
                    var p = ((tarValue / total) * 200);//两个饼图所以需要*200-看图数量类推
                    return name + " " + tarValue + " (" + p.toFixed(2) + "%)";
                },
            series: [
                {
                    name: '收入',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '30%'],
                    data: incomeData,
                    label: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        incomeChart.setOption(incomeOption);

        // 支出
        var expenseLegend = <?php echo ($expenseLegend);?>;
        var expenseData = <?php echo ($expenseData);?>;

        var expenseChart = echarts.init(document.getElementById('expense'));
        var expenseOption = {
            title: {
                text: '30天内支出类型统计',
                subtext: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: '300',
                bottom: 20,
                data: expenseLegend
            },
            grid: {
                top: '170',
                containLabel: true
            },
            // 使用回调函数
            formatter: function(name) {
                    var data = expenseOption.series[0].data;//获取第一个数组
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += parseInt(data[i].value);

                        if (data[i].name == name) {
                            tarValue = parseInt(data[i].value);
                        }
                    }
                    console.log('abc', tarValue, total, name)
                    var p = ((tarValue / total) * 200);//两个饼图所以需要*200-看图数量类推
                    return name + " " + tarValue + " (" + p.toFixed(2) + "%)";
                },
            series: [
                {
                    name: '收入',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '40%'],
                    data: expenseData,
                    label: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        expenseChart.setOption(expenseOption);
    </script>
</body>

</html>